<template>
  <div>
    <div id="bg">
      <div id="logo">游戏服务管理系统</div>
      <div id="login">
        <el-card class="box-card">
          <div id="form" :v-model="user" @keyup.enter="login">
            <el-input v-model="user.name" placeholder="请输入用户名" ></el-input>
            <el-input
              placeholder="请输入密码"
              v-model="user.password"
            
              show-password
            ></el-input>
            
            <img :src="captchaUrl" @click="changeImage()" width="143px" height="40px" />
            <el-input
            placeholder="请输入验证码"
            
            v-model="user.code"
          ></el-input>
          

            <el-button id="denglu" type="primary" @click="login">登录</el-button>
            <el-button id="register" type="success" @click="register">注册</el-button>
            <el-button id="forget"  type="info" @click="showForgotPasswordModal">忘记密码</el-button>
            <el-button  class="el-icon-arrow-left"  id="return-btn" style="background-color:transparent;color:black;font-weight: bold;border:none;margin-top: 10px;"><router-link to="/" style="text-decoration:none;color:blue;">返回</router-link></el-button>
          </div>
        </el-card>
      </div>
      <div id="clock">
        <div id="time">{{ time }}</div>
        <div id="date">{{ date }}</div>
      </div>
      <div id="copy">Copyright @ 2024.涂科网页版权归属</div>
    </div>

    <el-dialog
      title="找回密码"
      :visible="forgotPasswordModalVisible"
      @close="forgotPasswordModalVisible = false"
    >
      <el-form :model="forgotPasswordForm" label-width="80px">
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="forgotPasswordForm.email" placeholder="请输入注册时使用的邮箱地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="forgotPasswordModalVisible = false">取消</el-button>
        <el-button type="primary" @click="sendResetEmail">发送重置邮件</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/request/request.js';

export default {
  data() {
    return {
      user: {},
      key: '',

      captchaUrl: '',
      time: "",
      date: "",
      forgotPasswordModalVisible: false,
      forgotPasswordForm: {
        email: ''
      }
    };
  },
  mounted() {
    this.key = Math.random();
    this.captchaUrl = 'http://47.99.51.143:9000/captcha?key=' + this.key;
    this.$nextTick(() => {
      setInterval(this.updateClock, 1000);
    });
  },
  methods: {
    changeImage() {
      this.key = Math.random();
      this.captchaUrl = 'http://47.99.51.143:9000/captcha?key=' + this.key;
    },
    updateClock: function () {
      var date = new Date();
      this.time = this.formatTime(date);
      this.date = this.formatDate(date);
    },
    formatTime: function (date) {
      var hours = this.padZero(date.getHours());
      var minutes = this.padZero(date.getMinutes());
      return hours + ":" + minutes;
    },
    formatDate: function (date) {
      var year = date.getFullYear();
      var month = this.padZero(date.getMonth() + 1);
      var day = this.padZero(date.getDate());
      return year + "/" + month + "/" + day;
    },
    padZero: function (value) {
      return value < 10 ? '0' + value : value;
    },
    showForgotPasswordModal() {
      this.forgotPasswordModalVisible = true;
    },
    sendResetEmail() {
      console.log('发送重置邮件到邮箱：', this.forgotPasswordForm.email);
      this.forgotPasswordModalVisible = false; // 关闭模态框
      // 在这里实现发送重置邮件的逻辑
    },
    login() {
      request.post("/user/login?key=" + this.key, this.user).then(res => {
        console.log(res);
        if (res.code === "0") {
          //本地仓库存储user信息
          localStorage.setItem('user', JSON.stringify(res.data));
          // 跳转到游戏页面
          if (res.data.role === "3") {
            this.$router.push({ path: '/gametest' });
            this.$message.success(`欢迎回来，商家${res.data.name}！`);
          } else {
            this.$message.error('账户错误，请输入正确的商家账户信息');
            this.key = Math.random();
            this.captchaUrl = 'http://47.99.51.143:9000/captcha?key=' + this.key;
          }

        } else {
          this.$message.error('用户名或密码或验证码错误');
          this.key = Math.random();
          this.captchaUrl = 'http://47.99.51.143:9000/captcha?key=' + this.key;
        }

      });
    },
    register() {
      this.$router.push({ path: '/register' });
    }
  }
};
</script>

<style scoped>
#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /* 渐变 */
  background-image: url("/src/views/photo/login1.jpg");
  background-size: 100%;
  animation: myanimation 30s infinite;
}

@keyframes myanimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 100%;
  }
}

#logo {
  color: black;
  font-size: 50px;
  font-weight: 80;
  text-transform: uppercase;
  position: absolute;
  left: 5%;
  top: 15%;
}

#login {
  top: 30%;
  position: absolute;
  left: 38%;
}

#return-btn {
  position: absolute;
  top: 0;
  left: 0;
}

.el-card {
  border-radius: 3%;
  width: 373px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.35);
  border: 0px;
}

#form {
  padding-bottom: 15px;
  line-height: 60px;
}

#clock {
  color: aliceblue;
  position: absolute;
  top: 70%;
  right: 10%;
  text-align: right;
}

#register {
  position: absolute;
  left: 70%;
  top: 80%;
}




#denglu {
  position: absolute;
  left: 5%;
  top: 80%;
}



#forget {
  position: absolute;
  left: 40%;
  top: 80%;
}

#time {
  font-size: 50px;
}

#date {
  font-size: 35px;
}

#copy {
  color: aliceblue;
  position: absolute;
  bottom: 5%;
  left: 40%;
  right: 0;
}
</style>

